<template>
  <div class="warehouse-content">
    <!-- 左侧图片容器 -->
    <div class="left-image">
      <img src="/src/static/ck.png" alt="设备示意图" class="warehouse-img">
    </div>
    <!-- 右侧卡片容器（改为flex容器，支持换行） -->
    <div class="right-card">
      <a-card class="warehouse-card">
        <div class="card-header">仓库与物料台账</div>
        <div class="card-content">
          可设库存预警规则，自动监控并通知异常；支持呆滞料判定与清单生成，辅助制定处理方案，减少资金占用，提升周转率。
        </div>
      </a-card>
      <a-card class="warehouse-card">
        <div class="card-header">库存管理</div>
        <div class="card-content">
          可设库存预警规则，自动监控并通知异常；支持呆滞料判定与清单生成，辅助制定处理方案，减少资金占用，提升周转率。
        </div>
      </a-card>
      <a-card class="warehouse-card">
        <div class="card-header">出入库管理</div>
        <div class="card-content">
          从申请、验收 / 拣货到登记形成闭环，扫码核对物料，自动更新库存，过程可追溯，有效减少错发、漏发问题。        </div>
      </a-card>
      <a-card class="warehouse-card">
        <div class="card-header">盘点管理</div>
        <div class="card-content">
          支持定期与临时盘点，自定义范围，扫码或手动录入数量，自动对比生成差异表，可备注原因并调整库存，输出盘点报告。
        </div>
      </a-card>
      <a-card class="warehouse-card">
        <div class="card-header">统计查询功能</div>
        <div class="card-content">
          多维度统计库存、出入库、盘点数据，以图表可视化呈现，支持自定义查询条件，助力管理员掌握状况、优化决策。
        </div>
      </a-card>
      <a-card class="warehouse-card">
        <div class="card-header">实时监控与预警</div>
        <div class="card-content">
          仪表盘实时展示仓库关键指标，自动触发库存、超期出入库、盘点差异过大等预警，及时处理问题，提升运营效率。
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 最外层容器：左右布局 */
.warehouse-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 整体在小屏幕换行 */
  min-width: 600px;
  padding: 20px;
  gap: 20px;
}

/* 左侧图片容器：固定宽度 */
.left-image {
  width: 300px;
  flex-shrink: 0; /* 不收缩，避免挤压 */
}

.warehouse-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* 右侧卡片容器：改为flex容器，支持内部卡片换行 */
.right-card {
  display: flex;
  flex: 1; /* 占据剩余空间 */
  min-width: 300px; /* 最小宽度，避免过窄 */
  flex-wrap: wrap; /* 核心：卡片超出宽度时自动换行 */
  gap: 16px; /* 卡片之间的间距（水平+垂直） */
  padding: 10px 0; /* 上下内边距，优化边缘卡片间距 */
}

/* 单张卡片样式：限制最大宽度，触发换行 */
.warehouse-card {
  flex: 1; /* 自动填充行内空间 */
  min-width: 300px; /* 最小宽度，确保内容不拥挤 */
  max-width: 350px; /* 最大宽度，超过则换行 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

/* 卡片标题样式 */
.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 卡片内容样式 */
.card-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  padding: 8px 0;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .warehouse-content {
    min-width: 300px;
    flex-direction: column; /* 左右布局改为上下布局 */
    align-items: center;
  }

  .left-image {
    width: 250px;
  }

  .right-card {
    width: 90%; /* 占满屏幕宽度 */
  }

  .warehouse-card {
    max-width: 100%; /* 小屏幕卡片占满宽度，不换行 */
  }
}
</style>